<template>
	<view class="charge">
		<view class="top">
			<text class="toptext">提现金额</text>
			<view class="topinput">
				￥<input type="number" v-model="num" placeholder="0.00" />
			</view>
		</view>
		<view class="charge_1">
			<text class="title">付款方式</text>
			<radio-group name="">
				<label class="charge_check">
					<view class="left">
						<image src="/static/index/yh1.png" mode=""></image>
						<view class="text">
							<text>银行转账</text>
						</view>
					</view>
					<radio value="1" :checked="radioShow === 1" />
				</label>
				<label class="charge_check">
					<view class="left">
						<image src="/static/index/wx.png" mode=""></image>
						<view class="text">
							<text>微信转账</text>
						</view>
					</view>
					<radio value="3" :checked="radioShow === 3" />
				</label>
				<label class="charge_check">
					<view class="left">
						<image src="/static/index/zfb.png" mode=""></image>
						<view class="text">
							<text>支付宝转账</text>
						</view>
					</view>
					<radio value="4" :checked="radioShow === 4" />
				</label>
			</radio-group>
		</view>
		<button class="btn" :loading="loading" :disabled="loading" @click="withdraw">
			确认提现
		</button>
	</view>
</template>

<script>
	import {
		withdraw
	} from "@/api/api.js"
	export default {
		data() {
			return {
				radioShow: 1,
				loading: false,
				num: ''
			}
		},
		onLoad() {

		},
		methods: {
			withdraw() {
				var that = this
				if (that.num == '') {
					return uni.$showMsg('请输入体现金额')
				}
				that.loading = true
				withdraw({
					num: that.num,
					type: that.radioShow
				}).then(res => {
					that.loading = false
					if (res.code == 0) {

					}
				})
			},
			changeradio(i) {
				this.radioShow = i
			},
		}
	}
</script>

<style lang="scss">
	.charge {
		padding-bottom: 20rpx;

		.top {
			background: #fff;
			padding-bottom: 20px;

			.toptext {
				padding: 0 5%;
				line-height: 80px;
			}

			.topinput {
				display: flex;
				align-items: center;
				font-size: 20px;
				padding: 0 5%;

				input {
					width: 100%;
					margin-left: 5px;
					font-size: 20px;
					border-bottom: 1px solid #ccc;
				}
			}
		}

		.title {
			padding: 0 5%;
			line-height: 40px;
			font-size: 12px;
		}

		.charge_1 {
			background: #fff;
			margin-top: 20rpx;

			.bankinfo {
				font-size: 24rpx;
				padding: 10rpx 5%;
				padding-bottom: 0;

				.info {
					padding: 20rpx 0;
					border-bottom: 1px solid #efefef;
				}
			}

			.payimg {
				padding: 10px 0;

				image {
					width: 90%;
					margin-left: 5%;
				}
			}

			.charge_check {
				padding: 15px 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100% !important;
				box-sizing: border-box;
				margin-bottom: 0 !important;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
					}

					.text {
						display: flex;
						flex-direction: column;
						font-size: 14px;
						margin-left: 10px;

						.num {
							color: #777;
						}
					}
				}
			}
		}

		.btn {
			background: #af3535;
			color: #fff;
			width: 80%;
			margin: 20rpx auto;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 10rpx;
			margin-top: 30px;
		}
	}
</style>